<template>
  <div class="table-mechanical">
    <vab-query-form>
      <vab-query-form-left-panel>

        <el-tabs v-model="sConfigs" type="border-card" tab-position="left"  @tab-click="handleClick">
          <el-tab-pane name="sConfigs">
            <span slot="label"> 翻身项目</span>
            <el-form ref="form" :model="form"  label-width="80px" >
              <el-card class="box-card">
                <el-form-item label="项目"  required>

                  <search-input v-model="form.mark" multiple :config="sConfig" @change="projectMarkChange1"   placeholder="请输入项目关键词"></search-input>


                </el-form-item>
              </el-card>

            </el-form>
          </el-tab-pane>
          <el-tab-pane label="常用语设置" name="logList" >
            <span slot="label"> 常用语设置</span>
            <el-card class="box-card">
              <el-tag
                style="cursor: pointer"
                @click="tagclick(tag)"
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput" >+咨询内容标签</el-button>
            </el-card>


          </el-tab-pane>

        </el-tabs>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
      </vab-query-form-right-panel>
    </vab-query-form>






    <div style="position: fixed;bottom: 20px;right: 20px;">
      <el-button type="primary"  @click="Saveadd">保存设置</el-button>
    </div>
  </div>
</template>

<script>
    import { searchAllItemInfos } from "@/api/record"
    import { add,addlabel,searchLabels,findOrganTurnOverItem} from "@/api/mechanism"
    import searchInput from '@/components/searchInput'
    export default {
        name: "Mechanism",
        components: {
            searchInput
        },
         data(){

           return{
               sConfigs:"sConfigs",
               dynamicTags: [],
               id:1,
               tag:{

               },
               inputVisible: false,
               inputValue: '',
               sConfig: {
                   api: '/sinohis/pension/fee/itemmanager/searchAllItemInfos',
                   method: 'post',
                   postKey: 'mnemonicCodeOrName',
                   label: 'name',
                   value: 'mark',
                   data: { nurseItemBol: true },
                   keys: [
                       { name: '名称', key: 'name' },
                       { name: '价格', key: 'fee' },
                   ]
               },
               searchProjectOptions:{

               },
               dialogFormVisible:false,
               title:"设置翻身项目",
               form:{
                   institutionNumber:"",
                   mark:[

                   ],
               },
           }

         },
        created(){
         this.form.institutionNumber=localStorage.getItem("institutionNumber")
          this.findOrganTurnOverItem()
        },
        methods:{
            handleClick(tab,event){
                if(tab.name == 'logList'){
                    this.id=2
                    this.searchlables()
                }else {
                    this.id=1
                }
            },

          findOrganTurnOverItem(){
            let  institutionNumber=this.form.institutionNumber
            findOrganTurnOverItem({institutionNumber}).then(res => {
              console.log(res)
              this.form.mark=res.data

            })
          },
            Saveadd(){
                if(this.id==1){
                    console.log(this.form)
                    add(this.form).then(res => {
                        if(res.code==200){
                            this.$baseMessage("保存成功");
                        }
                    })
                }else if(this.id==2){
                    this.tag.labels=this.dynamicTags
                    console.log(this.tag)
                    addlabel(this.tag).then(res => {
                        if(res.code==200){
                            this.$baseMessage("添加成功");
                            this.searchlables()

                        }
                    })
                }



            },
            searchlables(){
                let label=""
                searchLabels({label}).then(res => {
                   console.log(res)
                    this.dynamicTags=res.data.labels
                    this.tag=res.data
                })
            },

            searchProject(mnemonicCodeOrName) {
                // this.addProjectVisible = true
                if (mnemonicCodeOrName !== '') {

                    searchAllItemInfos({ mnemonicCodeOrName: mnemonicCodeOrName, nurseItemBol: true }).then(res => {
                        this.searchProjectOptions = res.data

                    })
                } else {
                    this.searchProjectOptions = [];
                }
            },
            projectMarkChange1(value){

                for(let i=0;i<value.length;i++){
                    this.form.mark=(value[i].mark)

                }

            },
            tagclick(tag){
                console.log(tag)
            },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }

        },
    }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 25px;
    line-height: 25px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 12px;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<style scoped>
  .table-mechanical>>>.el-tabs--border-card{
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
  }
  .table-mechanical >>> .el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
    border-right: 0 !important;
    height: 300px;

  }
  .table-mechanical>>>.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active{
    border: 0 !important;
  }
  .table-mechanical>>>.el-tabs--border-card > .el-tabs__header{
         border: 0 !important;
  }
  .table-mechanical>>>.el-tabs--border-card > .el-tabs__header .el-tabs__item{
    transition:none !important;
  }
  .box-card{
    margin-left: 200px !important;
  }
</style>
